<template>
  <div class="search-list">
    <van-nav-bar fixed title="商品列表" left-arrow @click-left="router.back()"/>
    
    <van-search readonly shape="round" v-model="keyword" show-action background="#ffffff">
      <template #action>
        <van-icon name="apps-o" class="tool" size="22px"/>
      </template>
    </van-search>

    <!-- 排序选项卡 -->
     <div class="sort-btns">
        <div class="sort-item">综合</div>
        <div class="sort-item">销量</div>
        <div class="sort-item">价格</div>
     </div>

     <div class="goods-list">
        <GoodsItem v-for="item in productList" :key="item.goods_id" :item="item"></GoodsItem>
     </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getProductListApi } from '@/api/product'
import GoodsItem from '@/components/GoodsItem.vue'

const router = useRouter()
const route = useRoute()
const keyword = ref('')
const productList = ref([])

const getProductList = async () => {
  const { data: {list} } = await getProductListApi({
    categoryId: route.query.category_id,
    goodsName: keyword.value,
    page: 1,
  })
  productList.value = list.data
  console.log(list)
}

// 获取路由参数
onMounted(() => {
  keyword.value = route.query.keyword as string || '商品搜索'
  getProductList()
})

</script>   

<style scoped lang="scss">
.search-list {
    padding-top: 46px;
    ::v-deep(.van-icon-arrow-left) {
        color: #333;
    }
    .tool {
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sort-btns {
        display: flex;
        justify-content: space-around;
        padding: 10px;
        .sort-item {
            flex: 1;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
    }
}



</style>

